var stompClient = null;

function setConnected(connected) {
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    }
    else {
        $("#conversation").hide();
    }
    $("#greetings").html("");
}

function connect() {
    if ($("#name").val()==""){
        showTip("请输入名字")
    }


    var socket = new SockJS('/gs-guide-websocket');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        // stompClient.subscribe('/topic/greetings', function(greeting) {//接受消息
        //     showGreeting(JSON.parse(greeting.body).content);
        // });
        stompClient.subscribe('/topic/siteMove', function(ServerReply) {//接受消息
            showSite(ServerReply);
        });
    });

    clickUp()
}

function disconnect() {
    Offline();
    if (stompClient !== null) {
        stompClient.disconnect();
    }
    setConnected(false);
}


function clickUp() {
    stompClient.send("/app/playersite", {}, JSON.stringify({'name': $("#name").val(),  "command":"up" }   )); //发送消息
}
function clickDown() {
    stompClient.send("/app/playersite", {}, JSON.stringify({'name': $("#name").val(),  "command":"down"}    )); //发送消息
}
function clickLeft() {
    stompClient.send("/app/playersite", {}, JSON.stringify({'name': $("#name").val(),  "command":"left"}    )); //发送消息
}
function clickRight() {
    stompClient.send("/app/playersite", {}, JSON.stringify({'name': $("#name").val(),  "command":"right"}    )); //发送消息
}
function Offline() {
    stompClient.send("/app/playersite", {}, JSON.stringify({'name': $("#name").val(),  "command":"offline"}    )); //发送消息
}

function showTip(message) {
    $("#server_info").empty()
    $("#server_info").append(message );
}

function showSite(ServerReply){
    cleanPlayerBox()
    var gameData =JSON.parse(ServerReply.body);
    for (var key in gameData) {

        let gamesite =gameData[key].x+"-"+gameData[key].y
        var id="site"+gamesite
        $("#"+id).append("<span>"+key+"</span>")

    }
    showTip(JSON.stringify(ServerReply.body));
}


maxX=14;
maxY=14;

function initPlayBox(){
    for (let i = 0; i <=maxY ; i++) {//y轴
        let appStr="<tr>";
        for (let j = 0; j <=maxX ; j++) { //x轴
            let gamesite =j+"-"+i;
            appStr+="<td class='game_square' id='site"+gamesite+"'></td>"
        }
        appStr+="</tr>";
        $("#gamebox").append(appStr);
    }
}

function cleanPlayerBox(){
    $("#gamebox").empty()
    initPlayBox();
}


$(function () {
    initPlayBox();

    $("form").on('submit', function (e) {
        e.preventDefault();
    });

    $( "#connect" ).click(function() { connect(); });
    $( "#disconnect" ).click(function() { disconnect(); });

    $( "#move_up" ).click(function() { clickUp(); });
    $( "#move_down" ).click(function() { clickDown(); });
    $( "#move_left" ).click(function() { clickLeft(); });
    $( "#move_right" ).click(function() { clickRight(); });
});

//监控键盘上下左右
$(document).keydown(function(event){
    var keyNum = event.which;   //获取键值
    switch(keyNum){  //判断按键
        case 37:  clickLeft();  break;
        case 38:  clickUp();    break;
        case 39:  clickRight(); break;
        case 40:  clickDown();  break;
        default:
            break;
    }
});

